<template>
	<view class="header">
		<view class="uesr">
			<view class="top-xh"></view>
			<view class="fot-xh">
				<view url="" hover-class="none" v-if="hasLogin" @click="gotoPage('/pages/my/profile/profile')">
					<view class="pic">
						<image v-if="user.avatar" :src="user.avatar" style="width: 130rpx;border-radius: 130rpx;" mode="widthFix"></image>
						<u-avatar
							v-else
							:text="user.xName"
							:fontSize="user.xName?(user.xName.length > 2?9:25):''"
							shape="circle"
							size="70"
							bgColor="#0087FC">
						</u-avatar>
					</view>
					<view class="txt">
						<view class="name">
							<view class="h3">
								{{ user.userName }}
							</view>
							<view class="phone">
								{{ user.dept.deptName }}
							</view>
						</view>
					</view>
				</view>
				<view url="" hover-class="none" v-else @click="gotoPage('/pages/login/index')">
					<view class="pic">
						<image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/c31990f80394475a801d2ce9da428ab0.png" style="width: 130rpx;border-radius: 130rpx;" mode="widthFix"></image>
					</view>
					<view class="txt">
						<view class="name">
							<view class="h3">
								未登录
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="ul-list1-xh">
			<view class="li">
				<view url="" hover-class="none" @click="logout">
					<view class="pic">
						<image src="https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/6f0d311a9ca443aea1a3b22004a50c8e.png" style="width: 35rpx;" mode="widthFix"></image>
					</view>
					<view class="txt">
						<text>退出</text>
					</view>
				</view>
			</view>
		</view>
		<canvas id="canvas-clipper" canvas-id="canvas-clipper" type="2d" :style="{width: canvasSiz.width+'px',height: canvasSiz.height+'px',position: 'absolute',left:'-500000px',top: '-500000px'}" />
	</view>
</template>

<script>
import { getConfigKey } from '@/api/config.js'
export default {
	data() {
		return {
			canvasSiz:{
			    width:188,
			    height:273
			},
			image: 'https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/c31990f80394475a801d2ce9da428ab0.png',
			title: 'Hello',
			user: {
				userName:'',
			},
			version:'',
			newVersion:'',
		}
	},
	onLoad() {
		if (!this.hasLogin) {
			uni.reLaunch({
				url: '/pages/login/index'
			})
		}
		this.getNewVersion()
	},
	onShow() {
		this.user = uni.getStorageSync("loginInfo").user
		this.user.xName = this.user.userName.slice(1)
	},
	methods: {
		//添加照片水印
		watermark(info){
			let _this = this
		    // console.log("获取到的数据为",info)
		    uni.getImageInfo({
		        src: info.path,
		        success: function(image) {
		            // console.log(image);
		            _this.canvasSiz.width =image.width;
		            _this.canvasSiz.height =image.height;
		            let maxWidth = image.width - 60; 
		            // console.log("获取最大宽度",maxWidth)
		            //担心尺寸重置后还没生效，故做延迟
		            setTimeout(()=>{
		                let ctx = uni.createCanvasContext('canvas-clipper', _this);
		                
		                ctx.drawImage(
		                    info.path,
		                    0,
		                    0,
		                    image.width,
		                    image.height
		                );
		                
		                //具体位置如需和相机页面上一致还需另外做计算，此处仅做大致演示
		                ctx.setFillStyle('white');
		                // ctx.setFontSize(80);
						ctx.font = '100px bold'
		                ctx.fillText(info.info.hourtime, 20, _this.canvasSiz.height-120);
						// 黄色竖线
						ctx.moveTo(300,_this.canvasSiz.height-120);
						ctx.lineTo(300,_this.canvasSiz.height-200);
						ctx.setLineWidth(8)
						ctx.setStrokeStyle("#FBC339")
						ctx.stroke();
						//再来加个时间水印
						ctx.font = '42px bold'
						ctx.fillText(info.info.datetime, 330, _this.canvasSiz.height-170);
						//再来加个星期水印
						ctx.font = '42px bold'
						ctx.fillText(info.info.week, 330, _this.canvasSiz.height-120);
						// 地址
		                ctx.font = '40px bold'
		                let previousRowHeight =  _this.textPrewrap(ctx,info.info.address,20,_this.canvasSiz.height-50,70,maxWidth,3);
		
		                ctx.draw(false, () => {
		                    uni.canvasToTempFilePath(
		                        {
		                            destWidth: image.width,
		                            destHeight: image.height,
		                            canvasId: 'canvas-clipper',
		                            fileType: 'jpg',
		                            success: function(res) {
		                                _this.savePhoto(res.tempFilePath);
		                            }
		                        },
		                        _this
		                    );
		                });
		            },500)
		            
		            
		        }
		    });
		},
		/**
		ctx： 画布的上下文环境
		content： 需要绘制的文本内容
		drawX： 绘制文本的x坐标
		drawY： 绘制文本的y坐标
		lineHeight：文本之间的行高
		lineMaxWidth：每行文本的最大宽度
		lineNum：最多绘制的行数
		*/
		textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) {
		    var drawTxt = ''; // 当前绘制的内容
		    var drawLine = 1; // 第几行开始绘制
		    var drawIndex = 0; // 当前绘制内容的索引
		    // 判断内容是否可以一行绘制完毕
		    if (ctx.measureText(content).width <= lineMaxWidth) {
		        ctx.fillText(content.substring(drawIndex, i), drawX, drawY);
		    } else {
		            for (var i = 0; i < content.length; i++) {
		            drawTxt += content[i];
		            if (ctx.measureText(drawTxt).width >= lineMaxWidth) {
		                if (drawLine >= lineNum) {
		                    ctx.fillText(content.substring(drawIndex, i) + '..', drawX, drawY);
		                    break;
		                } else {
		                    ctx.fillText(content.substring(drawIndex, i + 1), drawX, drawY);
		                    drawIndex = i + 1;
		                    drawLine += 1;
		                    drawY += lineHeight;
		                    drawTxt = '';
		                }
		            } else {
		                // 内容绘制完毕，但是剩下的内容宽度不到lineMaxWidth
		                if (i === content.length - 1) {
		                    ctx.fillText(content.substring(drawIndex), drawX, drawY);
		                    return drawY;
		                    // console.log("最后高度为",drawY);
		                }
		            }
		        }
		    }
		},
		savePhoto(path){
		    //保存到相册
		    uni.saveImageToPhotosAlbum({
		        filePath: path,
		        success: () => {
		            uni.showToast({
		                title: '已保存至相册',
		                duration: 2000
		            });
		        }
		    });
		},
		async getConfigKeyData(configKey){
			const { data } = await getConfigKey(configKey)
			if(data.code == 200){
				this.newVersion = data.data.configValue
			}
		},
		getNewVersion(){
			let that = this
			// #ifdef APP-PLUS
			plus.runtime.getProperty(plus.runtime.appid, widgetInfo => {
				that.version = widgetInfo.version
				let platform = plus.os.name.toLocaleLowerCase()
				that.getConfigKeyData(platform)
			})
			// #endif
		},
		logout() {
			this.$store.commit('logout')
			uni.reLaunch({ url: '/pages/login/index' })
		}
	},
}
</script>

<style>
	.top-xh {
		padding-top: 80rpx;
		overflow: hidden;
		margin-bottom: 60rpx;
	}

	.top-xh .h2 {
		float: left;
		font-size: 32rpx;
		font-weight: bold;
	}

	.top-xh .pic {
		float: right;
	}

	.uesr {
		overflow: hidden;
		/* padding: 0 30rpx; */
		background: url("https://www.zxsl.zxmap.cn/zxch-app/2023/07/21/9f53ed66a4d343e4b727c5f05d165129.jpg") no-repeat 0 center;
		background-size: 100%;
		width: 100%;
		height: 400rpx;
	}
	
	.fot-xh{
		margin-left: 30rpx;
	}

	.fot-xh .pic {
		float: left;
		margin-right: 30rpx;
	}

	.fot-xh .txt {
		padding: 20rpx 0;
		overflow: hidden;
		color: #ffffff;
	}

	.fot-xh .txt .name {
		position: relative;
		display: block;
	}

	.fot-xh .txt .name .h3 {
		font-size: 35rpx;
		margin-bottom: 13rpx;
		font-weight: bold;
	}

	/* .fot-xh .name::after {
		content: '';
		position: absolute;
		border-top: 4rpx solid #ffffff;
		border-left: 4rpx solid #ffffff;
		width: 14rpx;
		height: 14rpx;
		right: 5rpx;
		top: 30%;
		transform: rotate(135deg);
	} */

	.m-a1 {
		overflow: hidden;
		padding: 20rpx;
		background-color: #fff;
		margin: 0 60rpx;
		box-shadow: 0rpx 5rpx 16rpx 0rpx rgb(226, 236, 255);
		margin-top: -40rpx;
		border-radius: 40rpx;
	}

	.m-a1 .txt {
		overflow: hidden;
	}

	.m-a1 .pic {
		float: left;
		margin-right: 20rpx;
	}

	.m-a1 text {
		display: block;
		font-size: 24rpx;
		color: rgb(179, 179, 179);
	}

	.m-a1 .txt .s1 {
		font-size: 24rpx;
		margin-bottom: 10rpx;
		color: rgb(0, 0, 0);
		font-weight: bold;
	}

	.ul-list1-xh {
		overflow: hidden;
		padding: 30rpx 50rpx 0 50rpx;
	}

	.ul-list1-xh .li {
		padding: 20rpx 0;
		overflow: hidden;
		position: relative;
	}

	.ul-list1-xh .li .pic {
		float: left;
		margin-right: 20rpx;
	}

	.ul-list1-xh .li .txt {
		overflow: hidden;
		font-size: 30rpx;
		padding-bottom: 20rpx;
		border-bottom: 1px solid rgb(242, 242, 242);
	}

	.ul-list1-xh .li::after {
		content: '';
		position: absolute;
		border-top: 3rpx solid rgb(179, 179, 179);
		border-left: 3rpx solid rgb(179, 179, 179);
		width: 12rpx;
		height: 12rpx;
		right: 5rpx;
		top: 30%;
		transform: rotate(135deg);
	}
	
	.grid-text {
		font-size: 14px;
		color: #909399;
		padding: 10rpx 0 20rpx 0rpx;
		/* #ifndef APP-PLUS */
		box-sizing: border-box;
		/* #endif */
	}
</style>